<template>
	<header class="header">
		<h1>todos---{{ $store.getters.leftCount }}</h1>
		<input class="new-todo" placeholder="What needs to be done?" v-model.trim="name" @keyup.enter="add" />
	</header>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
			}
		},
		methods: {
			add() {
				if (!this.name) {
					return alert('请输入内容')
				}
				this.$store.commit('add', this.name)
				// 清空
				this.name = ''
			},
		},
	}
</script>

<style></style>
